<template>
  <div class="admin-main">
    <div class="left-row">
      <div class="statistics-row">
        
        <div class="statistics-box">
          <div style="align-items: flex-end;">
            <font style="margin-right:0.04rem">最高</font>
            <p style="color:#ff832a">{{temperature.max}}</p>
            <p>/</p>
            <p style="color:#0096ff">{{temperature.min}}</p>
            <font style="margin-left:0.04rem">最低</font>
          </div>
          <span>环境温度(℃）</span>
        </div>
        <div class="statistics-box">
          <div>
            <p style="color:#00c800">{{prodnum.open}}</p>
            <p>/{{prodnum.total}}</p>
          </div>
          <span>设备总数</span>
        </div>
        <div class="statistics-box">
          <div>
            <div>
              <p :class="electricity.day>1000 ||electricity.year>1000?'eleendk':''">{{electricity.day}}</p>
              <span>当日</span>
            </div>
            <span></span>
            <div>
              <p :class="electricity.dayavg>1000 ?'eleendk':''">{{electricity.dayavg}}</p>
              <span>上月日均</span>
            </div>
          </div>
          <span>用电量(kW·h）</span>
         
        </div>
        <div class="statistics-box">
          <div>
            <div>
              <p>{{watermeter.day}}</p>
              <span>昨日</span>
            </div>
            <span></span>
            <div>
              <p>{{watermeter.dayavg}}</p>
              <span>上月日均</span>
            </div>
          </div>
          <span>用水量(吨)</span>
        </div>
      </div>
      <div class="workele-row">
        <div class="title-war">
          <div class="title">
            <i><img src="@/assets/icons/title_icon.png" /></i>
            <span>非工作时段用电占比</span>
          </div>

        </div>
        <div id="workele" ref="workele" class="workele"></div>
      </div>
      <div class="weekele-row">
        <div class="title-war">
          <div class="title">
            <i><img src="@/assets/icons/title_icon.png" /></i>
            <span>近七天用电量(kW·h)</span>
          </div>
        </div>
        <div id="weekele" ref="weekele" class="weekele"></div>
      </div>
    </div>
    <div class="center-row">
      <div class="Proportion-row">
        <div id="proportion" ref="proportion" class="proportion">
        </div>
      </div>
      <div class="overview-row">
          <div class="overview-ring">
            <div class="overview-infos">
              <span><span>{{overviewdata.name}}</span><span>当日用电量</span></span>
                <p :style="overviewdata.value > 1000?'font-size:0.5rem':''">{{overviewdata.value}}<i style="font-style: inherit;font-size: 0.22rem;">　kW·h</i></p>
                <span>
                  设备总数
                </span>
                <div :style="overviewdata.allprod > 1000?'font-size:0.4rem':''"><font>{{overviewdata.opprod}}</font>/{{overviewdata.allprod}}</div>
            </div>
            <div class="overview-wave">
              <div class="overview-wave-war" :style="{ top: overviewwavetop+ 'rem' }">
                <div class="wave1"><img src="@/assets/icons/wave.png"/></div>
                <div class="wave2"><img src="@/assets/icons/wave.png"/></div>
              </div>
            </div>
            <div class="overview-ring-box"></div>
          </div>
          
        </div>
      <div class="global-row">
        <div class="global-box">
          <img src="@/assets/icons/ele_icon.png"/>
          <p >{{electricity.day}}</p>
          <span>全局总用电量(kW·h)</span>
        </div>
        <div class="global-box">
          <img src="@/assets/icons/water_icon.png"/>
          <p>{{(electricity.day  * 0.785 ).toFixed(1)}}</p>
          <span>当日碳排放量(Kg)</span>
        </div>
        <div class="global-box">
          <img src="@/assets/icons/prod_icon.png"/>
          <p>{{operationTotal}}</p>
          <span>累计操作次数(次)</span>
        </div>
      </div>
    </div>
    <div class="right-row">
      <div class="elestatistics-row">
        <div class="title-war">
          <div class="title">
            <i><img src="@/assets/icons/title_icon.png" /></i>
            <span>用{{isele==0?'电':'水'}}量统计({{isele==0?'kW·h':'吨'}})</span>
          </div>
           <div class="changemode" @click="eleandwaterchange()">
            <i><img src="@/assets/icons/change_icon.png" /></i><span>切换用{{isele==1?'电':'水'}}量</span>
          </div>
        </div>
        <div class="elestatistics-box">
          <div class="cycle-row">
            <div v-show="isele==0">
              <p :class="electricity.day>1000 ||electricity.year>1000 ?'eleendk':''">{{electricity.day}}</p>
              <font>日(kW·h)</font>
            </div>
            <span v-show="isele==0"></span>
            <div>
              <p :class="electricity.day>1000||electricity.year>1000?'eleendk':''">{{isele==0?electricity.week.toFixed(1):watermeter.week}}</p>
              <font>周({{isele==0?'kW·h':'吨'}})</font>
            </div>
            <span></span>
            <div>
              <p :class="electricity.day>1000 ||electricity.year>1000?'eleendk':''">{{isele==0?electricity.month.toFixed(1):watermeter.month}}</p>
              <font>月({{isele==0?'kW·h':'吨'}})</font>
            </div>
             <span></span>
             <div>
              <p :class="electricity.day>1000 ||electricity.year>1000?'eleendk':''">{{isele==0?electricity.year.toFixed(1):watermeter.year}}</p>
              <font>年({{isele==0?'kW·h':'吨'}})</font>
            </div>
          </div>
        </div>
      </div>
      <div class="elerank-row">
        <div class="title-war">
          <div class="title">
            <i><img src="@/assets/icons/title_icon.png" /></i>
            <span>{{isele==0?'当':'昨'}}日用{{isele==0?'电':'水'}}排行({{isele==0?'kW·h':'吨'}})</span>
          </div>
         
        </div>
        <div id="eleRanking" ref="eleRanking" class="eleRanking"></div>
      </div>
    
      <div class="Watermeter-row">
        <div class="title-war">
          <div class="title">
            <i><img src="@/assets/icons/title_icon.png" /></i>
            <span>当{{Dateperiod=='week'?'周':Dateperiod=='month'?'月':'年'}}总用{{isele==0?'电':'水'}}量({{isele==0?'kW·h':'吨'}})</span>
          </div>
          <div class="Watermeter-radio">
            <el-radio-group v-model="Dateperiod" size="small" @change="getwatermeterdata()">
              <el-radio-button label="week">周</el-radio-button>
              <el-radio-button label="month">月</el-radio-button>
              <el-radio-button label="year">年</el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <div id="watermeter" ref="watermeter" class="watermeter"></div>
      </div>
    </div>
  </div>
</template>
<script src="./index.js"></script>
<style lang="stylus" src="./index.styl" scoped></style>